@namespace DevToys.Blazor.Components
@inherits StyledComponentBase


<div id="@Id"
     Class="context-menu @(FinalCssClasses)"
     Style="@Style"
     @attributes="AdditionalAttributes"
     @oncontextmenu:preventDefault="true">
    <CascadingValue Value="this" IsFixed="true">
        <div @oncontextmenu="@ToggleMenuAsync"
             disabled="@(!IsActuallyEnabled)"
             class="context-menu-activator">
            @ChildContent
        </div>
    </CascadingValue>

    <Popover Open="_isOpen"
             AnchorOrigin="Origin.TopLeft"
             TransformOrigin="Origin.TopLeft"
             RelativeWidth="false"
             Style="@(PopoverStyle)"
             @ontouchend:stopPropagation>
        <CascadingValue Value="@this" IsFixed="true">
            <FocusTrapper Style="display: contents;"
                          OnEscapeKeyPressed="OnEscapeKeyPressedAsync"
                          @onfocusout="OnEscapeKeyPressedAsync">
                <ListBox @ref="_listBox"
                         Items="Items"
                         Context="item"
                         Role="menu"
                         OverrideDefaultItemTemplate="true"
                         Virtualize="false"
                         RaiseSelectionEventOnKeyboardNavigation="false"
                         SelectedIndexChanged="OnContextMenuItemSelected"
                         UseNativeScrollBar="true"
                         Class="context-menu-list-box"
                         @onkeydown="OnListBoxKeyDown">
                    <ItemTemplate>
                        <li role="menuitem"
                            class="@($"context-menu-item {(_listBox!.SelectedItem == item ? "selected" : string.Empty)} {(item.IsEnabled ? string.Empty : "disabled")}")"
                            aria-disabled="@(item.IsEnabled ? string.Empty : "true")">
                            <div class="icon-container">
                                <FontIcon Glyph="@item.IconGlyph" FontFamily="@item.IconFontFamily" />
                            </div>
                            <TextBlock Class="text"
                                       NoWrap="true"
                                       Text="@item.Text" />
                            @if (!string.IsNullOrWhiteSpace(item.KeyboardShortcut))
                            {
                                <TextBlock Appearance="TextBlockAppearance.Caption"
                                           NoWrap="true"
                                           Class="keyboard-accelerator"
                                           Text="@item.KeyboardShortcut" />
                            }
                        </li>
                    </ItemTemplate>
                </ListBox>
            </FocusTrapper>
        </CascadingValue>
    </Popover>
</div>